<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{
        height: 500px;
    }
    #w{
        position: sticky;
        top: 0;
        width: 500px;
        height: 20px;
        background: #000;
        margin: 100px auto;
    }
    </style>
</head>
<body>
    <div id="w">1111111</div>
    
</body>
</html>
<script>
    //定位属性
    //position: static | relative | absolute | fixed | Sticky

    //static
    //不定位  用的少 做响应式或者效果时用到

    //fixed
    //固定定位 
    //脱离文档流 
    //针对浏览器窗口进行定位     元素使用固定定位后会转换为行内块
    //会让float属性&盒子居中效果失效 

    //relative 
    //不脱离文档流
    //针对自身原来位置进行偏移   不能使行内元素转换为行内块
    //不会让float属性&盒子居中效果失效

    //absolote
    //脱离文档流
    //父盒子没有使用定位，子盒子针对浏览器窗口定位
    //父盒子使用定位，子盒子针对父级进行定位
    //行内元素使用绝对定位后，转换为行内块
    //会让float属性和盒子居中效果失效

    //Sticky
    //粘性定位 可以认为是相对定位&固定定位的混合
    //以浏览器的窗口为参照移动元素 
    //粘性定位 保留原有位置
    //必须添加top left right bottom其中一个才有效
    //跟页面滚动搭配使用 兼容性差 ie不支持 










    
    
</script>


